<template>
  <div class="payment-success">
    <div class="icon-check">
      <el-icon class="check-icon">
        <i class="el-icon-check"></i>
      </el-icon>
    </div>
    <h2>支付成功</h2>
<!--    <p>实付 {{ amount }} 元</p>-->
    <van-button class="finish-button" type="warning" @click="onFinish">
      完成
    </van-button>
  </div>
</template>
<script>
import axios from "axios";

export default {
  data() {
    return {
      amount: '',
      id: "",
      idure:[],
    };
  },
  mounted() {
    this.id = localStorage.getItem("id");
    this.amount = localStorage.getItem("price");
    this.idure = localStorage.getItem("idusr");
    console.log("支付完成，返回首页");
    this.getOrder()

  },
  methods: {
    onFinish() {
      this.$router.push("/shouyei");
      // 处理完成逻辑，比如返回首页
    },
    getOrder() {
      axios.post(`/shoppingorder/updatestatus?id=${this.id}`).then(res=>{
        console.log("支付成功，请等待发货")
      })
      axios.post(`/shoppingcart/shoppingcartdelete?id=${this.idure}`).then(res=>{
        console.log("支付成功，请等待发货")
      })
    },

  },
};
</script>

<style scoped>
.payment-success {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #fff;
}

.icon-check {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: #e1f5fe;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
}

.check-icon {
  font-size: 50px;
  color: #4caf50;
}

h2 {
  font-size: 24px;
  margin: 0;
  color: #333;
}

p {
  font-size: 16px;
  color: #666;
  margin: 5px 0 20px;
}

.finish-button {
  width: 150px;
}
</style>

